<template>
  <div class="more-mv">
    <Header title="更多MV" go-back="true"></Header>
    <div class="mv-album">
      <Row :gutter="6">
        <i-col span="12" v-for="(mv,mindex) in mvs" :key="mindex" @click.native="goMvPlay(mv.id, mv.cover)">
          <div class="grid_div" :style="{backgroundImage: 'url(' + mv.cover + ')'}">
            <div class="video-num">
              <Icon style="color: #fff;float: left;padding-left: 10px" type="ios-videocam-outline"/>
              <span>{{mv.playCount}}</span>
            </div>
          </div>
          <h3>{{mv.name}}</h3>
          <p>{{mv.artistName}}</p>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import {newMVs} from '../../../api/node'
import {saveMvCover} from '../../../api/storage'

export default {
  name: 'moreMV',
  data () {
    return {
      mvs: []
    }
  },
  created () {
    newMVs().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.mvs = res.data
        console.log(this.mvs)
      }
    })
  },
  methods: {
    goMvPlay (id, coverImg) {
      saveMvCover(coverImg)
      this.$router.push('/MVPLAY/' + id)
      console.log(id)
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.more-mv{
  width: 100%;
  padding-top: 50px;
  .mv-album{
    padding-top: 10px;
    .ivu-row{
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .ivu-col-span-12 {
      padding-bottom: 20px;
      .grid_div{
        text-align: center;
        height: 90px;
        background-size: 100% 100%;
        position: relative;
        .video-num{
          /*width: 60px;*/
          height: 20px;
          background: rgba(0,0,0,0.5);
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;
          span{
            color: #fff;
            float: left;
            line-height: 20px;
            padding-left: 10px;
            padding-right: 5px;
          }
        }
      }
      h3{
        font-weight: normal;
        font-size: 15px;
        padding-top: 10px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p{
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
